{% extends "admin/layout.html" %}

{% block title %}员工管理 - 后台管理系统{% endblock %}

{% block page_title %}员工管理{% endblock %}

{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">组织架构</a></li>
<li class="breadcrumb-item active">员工管理</li>
{% endblock %}

{% block content %}

<script>
document.addEventListener('DOMContentLoaded', function() {
    const companySelect = document.getElementById('company_name');
    const departmentSelect = document.getElementById('department_id');
    const form = document.querySelector('form');
    const selectedDeptId = "{{ request.args.get('department_id', '') }}";

    // 保存当前部门选择
    form.addEventListener('submit', function() {
        sessionStorage.setItem('selectedDeptId', departmentSelect.value);
    });

    // 当公司选择变化时，加载对应部门
    companySelect.addEventListener('change', function() {
        const companyName = this.value;

        // 清空部门下拉框
        departmentSelect.innerHTML = '<option value="">全部部门</option>';

        if (companyName) {
            // 发送AJAX请求获取公司对应的部门
            fetch(`/admin/admin/api/departments?company_name=${encodeURIComponent(companyName)}`)
                .then(response => response.json())
                .then(data => {
                    data.forEach(dept => {
                        const option = document.createElement('option');
                        option.value = dept.id;
                        option.textContent = dept.name;
                        departmentSelect.appendChild(option);

                        // 恢复之前选择的部门
                        if (dept.id == selectedDeptId || dept.id == sessionStorage.getItem('selectedDeptId')) {
                            option.selected = true;
                        }
                    });
                    // 清除存储的选择
                    sessionStorage.removeItem('selectedDeptId');
                });
        }
    });

    // 页面加载时如果有公司选择，加载对应部门
    if (companySelect.value) {
        companySelect.dispatchEvent(new Event('change'));
    }
});
</script>
<div class="card">
    <div class="card-header">
        <h3 class="card-title">员工列表</h3>
        <div class="card-tools">
            <a href="{{ url_for('admin.admin_member.add_member') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-plus"></i> 添加员工
            </a>
        </div>
    </div>
    <div class="card-body">
        <form method="get" class="row g-3">
            <div class="col-md-3">
                <label for="name" class="form-label">员工姓名</label>
                <input type="text" class="form-control" id="name" name="name" value="{{ request.args.get('name', '') }}" placeholder="输入员工姓名">
            </div>
            <!-- 在表单部分添加公司筛选 -->
            <div class="col-md-3">
                <label for="company_name" class="form-label">所属公司</label>
                <select class="form-select" id="company_name" name="company_name">
                    <option value="">全部公司</option>
                    {% for company in companies %}
                    <option value="{{ company }}"
                            {% if request.args.get('company_name') == company %}selected{% endif %}>
                    {{ company }}
                    </option>
                    {% endfor %}
                </select>
            </div>

            <!-- 修复部门下拉框 -->
            <div class="col-md-3">
                <label for="department_id" class="form-label">所属部门</label>
                <select class="form-select" id="department_id" name="department_id">
                    <option value="">全部部门</option>
                    {% for dept in departments %}
                    <option value="{{ dept.id }}"
                            {% if request.args.get('department_id')|string == dept.id|string %}selected{% endif %}>
                    {{ dept.name }}
                    </option>
                    {% endfor %}
                </select>
            </div>


    <div class="col-md-3">
        <label for="status" class="form-label">状态</label>
        <select class="form-select" id="status" name="status">
            <option value="">全部状态</option>
            <option value="1" {% if request.args.get('status') == '1' %}selected{% endif %}>在职</option>
            <option value="0" {% if request.args.get('status') == '0' %}selected{% endif %}>离职</option>
        </select>
    </div>
    <div class="col-12">
        <button type="submit" class="btn btn-primary">搜索</button>
        <a href="{{ url_for('admin.admin_member.member_management') }}" class="btn btn-secondary">重置</a>
    </div>
    </form>
</div>
<div class="card-body p-0">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>姓名</th>
                <th>手机号</th>
                <th>邮箱</th>
                <th>所属公司</th>
                <th>部门</th>
                <th>职位</th>
                <th>状态</th>
                <th>企业微信ID</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for member in members.items %}
            <tr>
                <td>{{ member.name }}</td>
                <td>{{ member.mobile | replace('([\\d]{3})[\\d]{4}([\\d]{4})', '\\1****\\2') }}</td>
                <td>{{ member.email or '-'  }}</td>
                <td>{{ member.company_name or '-' }}</td>
                <td>{{ member.department_name or '-'  }}</td>
                <td>{{ member.position or '-' }}</td>
                <td>
                    {% if member.status %}
                    <span class="badge bg-success">在职</span>
                    {% else %}
                    <span class="badge bg-secondary">离职</span>
                    {% endif %}
                </td>
                <td>{{ member.wecom_userid or '-'  }}</td>
                <td>
                    <a href="{{ url_for('admin.admin_member.edit_member', id=member.id) }}" class="btn btn-sm btn-primary" aria-label="编辑">
                        <i class="fas fa-edit"></i>
                    </a>
                    <a href="{{ url_for('admin.admin_member.delete_member', id=member.id) }}" class="btn btn-sm btn-danger" data-confirm="确定要删除此员工吗？" aria-label="删除">
                        <i class="fas fa-trash"></i>
                    </a>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<div class="card-footer">
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center">
            {% if members.has_prev %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('admin.admin_member.member_management', page=members.prev_num, **search_params) }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&laquo;</a>
            </li>
            {% endif %}

            {% for page_num in members.iter_pages(left_edge=1, right_edge=1, left_current=2, right_current=3) %}
            {% if page_num %}
            {% if members.page == page_num %}
            <li class="page-item active"><a class="page-link" href="#">{{ page_num }}</a></li>
            {% else %}
            <li class="page-item"><a class="page-link" href="{{ url_for('admin.admin_member.member_management', page=page_num, **search_params) }}">{{ page_num }}</a></li>
            {% endif %}
            {% else %}
            <li class="page-item disabled"><span class="page-link">...</span></li>
            {% endif %}
            {% endfor %}

            {% if members.has_next %}
            <li class="page-item">
                <a class="page-link" href="{{ url_for('admin.admin_member.member_management', page=members.next_num, **search_params) }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            {% else %}
            <li class="page-item disabled">
                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">&raquo;</a>
            </li>
            {% endif %}
        </ul>
    </nav>
</div>
</div>
{% endblock %}